<template>
	<div class="wrap">
      <v-carousel :list="list"></v-carousel>
      <div class="navbar">
         <router-link v-for="item in navlist" :to="item.link" :title="item.title">
            <img :src="item.img" :alt="item.title" />
            <div class="text">
               <p>{{ item.title }}</p>
               <span>{{ item.subTle }}</span>
            </div>
         </router-link>
      </div>
      <div class="main">
         <div class="abouts">
            <div class="title">
               <strong>{{aboutus.title}}</strong>
               <p>{{aboutus.subTitle}}</p>
            </div>
            <div class="about_box">
               <p>{{ aboutus.content }}</p>
               <div class="picture">
                  <p>{{ aboutus.note }}</p>
                  <router-link :to="'/msg_onepage'" class="btn">MORE</router-link> 
               </div>
            </div>
         </div>
         <div class="cases titleLeft">
            <div class="title">
               <strong>{{cases.caseInfo.cate_name}}</strong>
               <p>{{cases.caseInfo.subcate}}</p>
            </div>
            <div class="desc">
               <p>{{ cases.caseInfo.note }}</p>
            </div>
            <div class="caseCar" @mouseover="clear" @mouseout="run">
               <ul :style="{'width':ulWidth+'px','margin-left':ulLeft+'px'}">
                  <router-link v-for="(item, index) in cases.list" :to="'/msg_picture?c='+ cases.caseInfo.identifier +'&id=' + (index+1)" tag="li" :style="{width:liWidth+'px'}">
                     <img :src="apiurl+item.picture" :alt="item.title" />
                     <p>{{ item.title }}</p>
                  </router-link>
               </ul>
            </div>
         </div>
         <div class="service titleLeft">
            <div class="title">
               <strong>{{services.servicesInfo.cate_name}}</strong>
               <p>{{services.servicesInfo.subcate}}</p>
            </div>
            <div class="desc">
               <p>{{ services.servicesInfo.note }}</p>
            </div>
            <div class="service_box">
               <ul>
                  <li v-for="(item, index) in services.list">
                     <img :src="apiurl+item.picture">
                     <p>{{ item.title }}</p>
                     <router-link :to="'/msg_product?c='+ services.servicesInfo.identifier +'&id=' + (index+1)">MORE</router-link>
                  </li>
               </ul>
               <router-link :to="'/list_product'" class="big">查看更多项目</router-link>
            </div>
         </div>
         <div class="news titleLeft">
            <div class="title">
               <strong>{{news.newsInfo.cate_name}}</strong>
               <p>{{news.newsInfo.subcate}}</p>
            </div>
            <div class="desc">
               <p>{{news.newsInfo.note}}</p>
            </div>
            <div class="news_box">
               <ul>
                  <li v-for="(item,index) in news.list">
                     <router-link :to="'/msg_article?c='+news.newsInfo.identifier+'&id='+(index+1)" :title="item.title">{{ item.title }}</router-link>
                     <span>{{ item.date }}</span>
                  </li>
               </ul>
            </div>
         </div>
      </div>
	</div>
</template>

<script>
import vCarousel from './components/carousel'
export default {
   	data() {
      	return {
            navlist : [
               {
                  title : '关于我们',
                  subTle : 'ABOUT US',
                  link : '/msg_onepage',
                  img : require('../assets/about.jpg')
               },
               {
                  title : '新闻资讯',
                  subTle : 'list_article',
                  link : '/list_article',
                  img : require('../assets/news.jpg')
               },
               {
                  title : '精彩案例',
                  subTle : 'CASES',
                  link : '/list_picture',
                  img : require('../assets/cases.jpg')
               },
               {
                  title : '服务项目',
                  subTle : 'SERVICE',
                  link : '/list_product',
                  img : require('../assets/server.jpg')
               },
               {
                  title : '设计团队',
                  subTle : 'TEAM',
                  link : '/list_team',
                  img : require('../assets/team.jpg')
               },
               {
                  title : '联系我们',
                  subTle : 'CONTACT US',
                  link : '/msg_contact',
                  img : require('../assets/contact.jpg')
               }
            ],
            aboutus: {
               title: '',
               subTitle: '',
               content : '',
               note : '',
            },
            cases: {
               caseInfo: {},
               list : [],
            },
            services: {
               servicesInfo: {},
               list : [],
            },
            news: {
               newsInfo:{},
               list: [],
            },
            liWidth : 180,
            ulWidth : 0,
            ulLeft : 0,
            list: []
      	}
   	},
   	methods: {
         run (){
            this.timer = setInterval(()=>{
               let clientWidth = document.documentElement.clientWidth;
               if (clientWidth >= 640) {clientWidth = 640}
               if (this.ulWidth + this.ulLeft < clientWidth) {    
                  // ul宽度+ul所移动的距离小于屏幕宽度则判断最后一个，则ulleft=0
                  this.ulLeft = 0;
               }else{
                  this.ulLeft-=2;
               }
            },30);
         },
         clear (){
            clearInterval(this.timer); // 移动清楚定时器
         }
   	},
      mounted() {
         let _this = this;

         // ajax获取数据
         this.ajax('?c=msg&ts=ABOUT US&wxapp_skin=', function (res){
            _this.aboutus.content = res.data.data.content;
            _this.aboutus.note = res.data.data.note;
            _this.aboutus.title = res.data.data.title;
            _this.aboutus.subTitle = res.data.data.identifier;
         });

         this.ajax('?c=plugin&pluginid=wxapp_index&wxapp_skin=', function (res){
            _this.cases.list = res.data.data;
            _this.services.list = res.data.data2;
            _this.news.list = res.data.data3;

            _this.cases.caseInfo = res.data.data4[0].me;
            _this.services.servicesInfo = res.data.data4[0].me2;
            _this.news.newsInfo = res.data.data4[0].me3;

            _this.ulWidth = (_this.liWidth+16) * _this.cases.list.length;  // 动态计算uiWidth
            _this.list = _this.$store.getters.getCar                       // 从仓库取轮播图
         });

         this.run();

      },
      components: {
         vCarousel
      }
}
</script>

<style scoped>
   .navbar{overflow: hidden;}
   .navbar a{width:49.5%; height: 1.1rem; margin-top: 0.04rem; float: left; position: relative;}
   .navbar a:nth-of-type(2n){float: right;}
   .navbar a img{width: 100%; height: 100%;}
   .navbar a .text{position: absolute; left:.1rem; z-index: 9; top: 0.1rem; color: #fff;}
   .navbar a .text p{font-size: 0.16rem; color: #fff;}
   .navbar a .text span{color: rgb(165, 165, 165); font-size: 0.11rem;}
   .abouts .title p:after{content: ''; display: block; width: 0.4rem; height: 0.02rem; background:#002665; margin:0.05rem auto 0;}
   .abouts .about_box>p{text-align: center; line-height: 0.22rem; margin-bottom: 0.1rem;}
   .abouts .picture{background: url(../assets/about_bg2.jpg) center center no-repeat; padding: 0.12rem 0.05rem; background-size:100% 100%;}
   .abouts .picture p{color: #fff; line-height: 0.2rem;}
   .abouts .picture .btn{width:1.82rem; height: 0.32rem; margin:0.18rem auto; border:0.01rem solid #fff; border-radius: 0.03rem; text-align: center; line-height: 0.32rem; color: #fff; display: block;}
   .titleLeft .title{width:30%;float: left; border-right: 0.02rem solid #002665;}
   .titleLeft .desc{width:66%; float: right; margin:0.22rem 0;}
   .titleLeft .desc p{font-size: 0.12rem;}
   .cases .caseCar{width:100%; overflow: hidden;} 
   .cases .caseCar ul{overflow: hidden;}
   .cases .caseCar ul li{width:180px; margin:0 8px; float: left;}
   .cases .caseCar ul img{width:100%;}
   .cases .caseCar ul p{text-align: center; line-height: 0.25rem;}
   .service{background: #ededed; margin-top: 0.2rem; overflow: hidden;}
   .service .service_box ul,.news .news_box ul{clear: both; overflow: hidden;}
   .service .service_box li{width: 45%; padding: 0.06rem; float:left;background: #002665; color: #fff; text-align: center; margin-bottom: 0.1rem;}
   .service .service_box li img{width:100%;}
   .service .service_box li a{color: #fff; display: block; width:92%; border:1px solid #fff; border-radius: 3px; text-align: center; line-height: 0.32rem; height: 0.32rem; margin:0.04rem auto 0.1rem; font-size: 0.14rem;}
   .service .service_box li p{font-size: 0.16rem; color: #fff; line-height: 0.3rem;}
   .service .service_box li:nth-of-type(2n){float: right;}
   .service .service_box .big{border:1px solid rgba(0,38,101,1); border-radius: 3px; width:1.82rem; height: 0.32rem; line-height: 0.32rem; color: rgba(0,38,101,1); text-align: center; margin: 0.25rem auto; display: block;}
   .news ul li{padding:0 0.04rem; overflow: hidden; border-bottom:1px dashed #c6c6c6; height: 0.4rem; line-height:0.4rem;}
   .news ul li a{display: inline-block; width:79%;}
   .news ul li a:hover{color:#0064D4;}
   .news ul li span{color:#acacac; font-size: 0.11rem; float: right; display: inline-block; width:21%;}
</style>